<template>
    <el-container>
        <el-header style="height: 80px; background-color: #007ad0">
            <el-row>
                <el-col :span="12" style="margin-top: 20px">
                    <i style="color: white; font-size: 32px" class="el-icon-shopping-cart-1">
                        <b style="font-size: 26px"> 超市管理系统</b>
                    </i>
                </el-col>
                <el-col :span="12" style="text-align: right; margin-top: 28px; cursor: pointer">
                    <!-- 角色显示 -->
                    <el-dropdown trigger="hover" style="display: flex; align-items: center; justify-content: flex-end;">
                        <div style="display: flex; align-items: center;">
                            <el-avatar :size="28" shape="square" :src="BaseApi + circleUrl"></el-avatar>
                            <span style="
                                font-size: 18px;
                                color: white;
                                margin-left: 8px;
                                line-height: 28px;
                            ">
                                {{ isAdmin ? "管理员 " : "用户 " }}
                                {{ loginName }}
                            </span>
                        </div>

                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item @click.native="informationBtn">个人资料完善</el-dropdown-item> -->
                            <el-dropdown-item @click.native="empExit">退出登录</el-dropdown-item>
                            <el-dropdown-item @click.native="logoutVisable = true">注销账号</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <!--注销账户-->
        <el-dialog title="注销账户" :visible.sync="logoutVisable" width="70%">
            <el-form :model="logoutform" :rules="rules" ref="logoutform" label-width="100px" class="demo-ruleForm">
                <el-form-item label="内容" prop="content">
                    <el-input v-model="logoutform.content" placeholder="请填写本人确定注销"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="logoutSubmit('logoutform')">确 定</el-button>
                    <el-button @click="logoutCel('logoutform')">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-container>
            <el-aside width="200px" style="overflow-y: hidden;min-height: 900px; background-color: #e7f0ff;">
                <el-menu background-color="#e7f0ff" text-color="#000000" :router="true" :unique-opened="true"
                    active-text-color="#007acf" :default-active="$route.params.activeMenu || $route.path">
                    <el-menu-item index="(0).toString()" @click="goToHome">
                        <i class="el-icon-s-home" style="font-size: 20px; color: #007acf">
                            <b style="font-size: 15px">&nbsp;首页</b>
                        </i>
                    </el-menu-item>
                    <el-submenu v-for="item in menu_catalogs" :key="item.id" :index="item.id + ''">
                        <template slot="title">
                            <i :class="item.icon" style="font-size: 20px; color: #007acf">
                                <b style="font-size: 15px"> {{ item.label }}</b>
                            </i>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="c in item.children" :key="c.id" :index="c.purl">
                                <i :class="c.icon" style="font-size: 18px; color: #666666"> </i>
                                <b style="font-size: 13px"> {{ c.label }}</b>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { clearCookie, loginEmp } from "@/assets/js/auth";
import { ajaxGet, ajaxPost, popup } from "@/assets/js/common";
import Cookies from "js-cookie";

export default {
    data() {
        return {
            BaseApi: this.$store.state.BaseApi,
            logoutVisable: false,
            loginName: "",
            isAdmin: "",
            logoutform: {},
            circleUrl: loginEmp().headImg,
            menu_catalogs: [],
            rules: {
                content: [
                    {
                        required: true,
                        message: "内容不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        init() {
            this.isAdmin = loginEmp().isAdmin;
            this.loginName = loginEmp().nickName;
            ajaxGet("/empMenu", {}).then((res) => {
                res = res.data;
                if (res.code == 200) {
                    this.menu_catalogs = res.data;
                }
            });
        },
        /*个人资料*/
        // informationBtn() {
        //     this.$router.push("/personal/information");
        //     popup("请完善个人的资料");
        // },
        /*账户退出*/
        empExit() {
            this.$confirm("确定要退出系统?", "警示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    ajaxGet("/exit", this.pwdForm).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            popup("成功退出系统...");
                            clearCookie("employee");
                            clearCookie("token");
                            this.$router.push("/");
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作",
                    });
                });
        },
        /*注销账户*/
        logoutCel(formName) {
            this.$refs[formName].resetFields();
            this.logoutform = {};
            this.logoutVisable = false;
        },
        logoutSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    ajaxPost("/logout", {
                        content: this.logoutform.content,
                    }).then((res) => {
                        res = res.data;
                        if (res.code == 200) {
                            popup("注销成功");
                            clearCookie("employee");
                            clearCookie("token");
                            this.logoutVisable = false;
                            this.$router.push("/");
                        } else {
                            popup(res.msg, "error");
                        }
                    });
                }
            });
        },
        goToHome() {
            this.$router.push('/home')
        },
    },
    mounted() {
        this.init();
    },
};
</script>
<style>
.avatar {
    display: inline-block;
    width: 200px;
    float: right;
}

.personalFul {
    background-color: #ffffff;
    position: absolute;
    z-index: 999999;
    top: 58px;
    right: 20px;
    width: 151px;
}

/* .personalFul ul > li {
    margin: 1px auto;
    padding: 0px;
    height: 20px;
    color: #ffffff;
    background-color: #6495ED;
    list-style-type: none;
} */

.personalFul ul>li:hover {
    background-color: #fc4316;
}

.el-menu-item i {
    color: #000000;
}

.el-submenu__title i {
    color: #007acf;
}

.el-menu-item.is-active {
    background-color: #a0d0ff !important;
    color: #007acf !important;
}

.el-menu-item.is-active i {
    color: #007acf !important;
}

.el-menu-item:focus, .el-menu-item:hover {
    background-color: #a0d0ff !important;
}

.el-submenu__title:hover {
    background-color: #a0d0ff !important;
}

/* 修复侧边栏导航中间的白色缝隙 */
.el-menu {
    border-right: none !important;
}

.el-menu-item, .el-submenu__title {
    border-bottom: none !important;
    margin-bottom: 5px !important;
}

.el-menu-item-group__title {
    padding: 0 !important;
}

.el-menu-item-group {
    border-bottom: none !important;
}

.el-submenu .el-menu-item {
    min-width: 200px !important;
    padding-left: 48px !important;
    margin-bottom: 3px !important;
}

/* 子菜单默认颜色变浅 */
.el-menu-item {
    color: #666666 !important;
}

/* 自定义按钮样式 */
.el-button--primary {
    background-color: #d0e8ff !important;
    border-color: #d0e8ff !important;
    color: #40a9ff !important;
}

.el-button--primary:hover, .el-button--primary:focus {
    background-color: #40a9ff !important;
    border-color: #40a9ff !important;
    color: white !important;
}
</style>
